<template>
	<view class="say">
		<view class="say-list">
			<view v-for="item in list" class="say-list-item">
				<view class="say-list-time">{{dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
				<view class="say-list-cont" v-html="item.content"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,ref,reactive} from 'vue'
	import {onReachBottom} from '@dcloudio/uni-app'
	import dayjs from 'dayjs'
	import myApi from '@/utils/api'
	onMounted(()=>{
		getList()
	})
	const list = ref([])
	const param = reactive({current:1,size:6})
	// 触底
	onReachBottom(()=>{
		const  current = param.current+1
		if(current<=param.pages){
			param.current = current
			getList('add')
		}
	})
	const getList = async(type)=>{
		const {data:{records,current,pages},code} = await myApi.getSayList(param)
		if(code===0){
			list.value = type=='add'?[...list.value, ...records]:records
			param.current = current
			param.pages = pages
		}
	}
</script>
<style lang="scss">
	$color-primary:#1da57a;
	.say{
		padding: 30rpx;
		.say-list{
			.say-list-item{
				padding-bottom: 60rpx;
				text-align: center;
				.say-list-time{
					background-color: $color-primary;
					opacity: 0.6;
					display: inline-block;
					color: #fff;
					font-size: 22rpx;
					padding: 6rpx 10rpx;
					border-radius: 4rpx;
					margin-bottom: 20rpx;
				}
				.say-list-cont{
					border: {
						left: 6rpx solid $color-primary;
					};
					padding-left: 20rpx;
					text-align: left;
				}
			}
		}
	}
</style>